<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-if v-show w-else</title>
</head>
<body>
  <div id="app">
    <button type="button" @click=" flag = !flag ">切换显示/隐藏</button>
    <!-- v-if -->
    <h2 v-if="flag">这是一个 v-if 控制的元素</h2>
    <!-- v-show -->
    <h2 v-show="flag">这是一个 v-show 控制的元素</h2>
    <!-- v-if v-else -->
    <h2 v-if="flag">这是一个 v-if 控制的元素</h2>
    <h2 v-else>这是一个v-else 控制的元素</h2>
    <div style="height: 10px;background-color: #f60;"></div>
    <!-- v-once -->
    <!-- 单个元素 -->
    <span v-once>这是使用v-once的指令 {{ msg }}</span>
    <!-- 多个元素 -->
    <div v-once>
      <h1>子元素/子组件</h1>
      <p>{{ msg }}</p>
    </div>
    <!-- v-for  v-once -->
    <ul>
      <li v-for="count in 5" v-once>{{count}}, {{msg}}</li>
    </ul>
    <button type="button" @click="changedMsg">修改msg的值</button>
    <p v-text="msg"></p>
  </div>
</body>
<script src="./src/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      flag: false,
      msg: 'Hello vue.js'
    },
    methods: {
      changedMsg(){
        this.msg += "123";
      }
    },
  })
</script>
</html>